<template>
  <div>
    <div class="lunbo">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <img :src="'https://images.weserv.nl/?url=' + item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tab-list">
      <el-tabs @tab-click="handleClick" :stretch="true" v-model="isActive">
        <el-tab-pane label="虚拟类" name="book_fiction"></el-tab-pane>
        <el-tab-pane label="非虚拟类" name="book_nonfiction"></el-tab-pane>
      </el-tabs>

      <ul>
        <li v-for="book in bookList" :key="book.id" class="culm">
          <div class="img-box">
            <img
              :src="'https://images.weserv.nl/?url=' + book.cover.url"
              alt=""
            />
          </div>
          <div class="content">
            {{ book.title }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Book",
  data() {
    return {
      bookList: [],
      imgList: [],
      isActive: "book_fiction",
    };
  },
  created() {
    this.getDate();
  },
  methods: {
    getDate() {
      this.axios
        .get(
          "https://bird.ioliu.cn/v2?url=https://m.douban.com/rexxar/api/v2/subject_collection/" +
            this.isActive +
            "/items?start=0&count=8&loc_id=0&_=0"
        )
        .then((res) => {
          this.bookList = res.data.subject_collection_items;
          console.log(this.bookList);
          this.imgList = this.bookList.map((item) => {
            return item.cover.url;
          });
        });
    },
    add() {
      console.log(111);
    },
    handleClick() {
      this.getDate();
    },
  },
};
</script>

<style scoped lang='scss'>
.lunbo {
  img {
    width: 100%;
  }
}
.culm {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .img-box {
    flex: 3;
    height: 100%;
    width: 100%;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .content {
    flex: 4;
  }
}
</style>